<template>
  <s-layout class="set-wrap" title="常见问题" :bgStyle="{ color: '#f7f7f7' }">
    <view class="p-4 bg-white">
      <!-- 表单开始 -->
      <uni-forms ref="formRefss" :modelValue="formData" :rules="rules">
        <!-- 名称 -->
        <uni-forms-item label="名称" name="name" required>
          <uni-easyinput v-model="formData.name" placeholder="请输入姓名" :inputBorder="false" />
        </uni-forms-item>
        <u-line></u-line>
        <!-- 年龄 -->
        <uni-forms-item label="年龄" name="age" required>
          <uni-easyinput v-model="formData.age" type="number" placeholder="请输入年龄" :inputBorder="false" />
        </uni-forms-item>
        <u-line></u-line>

        <!-- 学籍 -->
        <uni-forms-item label="学籍" name="studentId" required>
          <uni-easyinput v-model="formData.studentId" placeholder="请输入学籍号" :inputBorder="false" />
        </uni-forms-item>
        <u-line></u-line>

        <!-- 地址 -->
        <uni-forms-item label="地址" name="address" required>
          <uni-easyinput v-model="formData.address" type="textarea" placeholder="请输入详细地址" :inputBorder="false" />
        </uni-forms-item>
        <u-line></u-line>

        <!-- 提交按钮 -->
      </uni-forms>
    </view>
  </s-layout>
</template>

<script setup>
  const formRef = ref(null);

  const state = ref({
    list: [],
    loading: true,
  });

  // 表单数据
  const formData = ref({
    name: '',
    age: '',
    studentId: '',
    address: '',
  });

  // 表单验证规则
  const rules = ref({
    name: {
      rules: [
        {
          required: true,
          errorMessage: '请输入姓名',
        },
      ],
    },
    age: {
      rules: [
        {
          required: true,
          errorMessage: '请输入年龄',
        },
      ],
    },
    studentId: {
      rules: [
        {
          required: true,
          errorMessage: '请输入学籍号',
        },
      ],
    },
    address: {
      rules: [
        {
          required: true,
          errorMessage: '请输入地址',
        },
      ],
    },
  });

  // 提交表单
  const submitForm = () => {
    formRef.value
      .validate()
      .then((res) => {
        console.log('表单验证成功', formData.value);
        uni.showToast({
          title: '提交成功',
          icon: 'success',
        });
        // 这里可以调用API提交数据
        // sheep.$api.xxx.submit(formData.value)
      })
      .catch((err) => {
        console.log('表单验证失败', err);
        uni.showToast({
          title: '请检查表单信息',
          icon: 'none',
        });
      });
  };

  onLoad(() => {});
</script>

<style lang="scss" scoped></style>
